<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Maps">

        <f:facet name="postinit">
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script type="text/javascript">
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var map = PF('gmap').getMap(),
                            latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                            map.setCenter(latlng);

                            var marker = new google.maps.Marker({
                                position: latlng
                            });

                            marker.setMap(map);
                        },
                        function(error) {
                            alert(error.message);
                        },
                        {
                           enableHighAccuracy: true
                        });
                }

            </script>
		</f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="a">
            <pm:header title="Maps">
                
            </pm:header>

            <pm:content>
                <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:15em" widgetVar="gmap"/>

                <p:separator />

                <p:commandButton type="button" value="My Location" onclick="findMe()"/>
            </pm:content>

        </pm:view>

    </pm:page>

</f:view>